<template>
    <div class='header'>
      <span>发布拼车订单</span>
    </div>
    <div class="user">
      <div class="info" style="width: 100%; max-width: 100%;"> <!-- 设置宽度和最大宽度为1000px -->
        <el-card class="box-card" style="width: 100%; height: auto;"> <!-- 设置卡片宽度为100%，高度自动 -->
          <el-row>
  
            <el-form :label-position="labelPosition" label-width="70px" style="max-width: 460px">
              <el-form-item label="行程路线">
                <el-select v-model="routePrice2" class="m-2" placeholder="Select">
                  <el-option v-for="item in routePrice" :key="item.id" :label="item.route" :value="item" />
                </el-select>
              </el-form-item>
              <el-descriptions>
                <el-descriptions-item label="行程价格">{{ routePrice2.price }}</el-descriptions-item>
              </el-descriptions>
              
              <el-form-item label="出发日期">
                <el-radio-group v-model="chuFadate">
                  <el-radio-button label="今天" value="今天" />
                  <el-radio-button label="明天" value="明天"/>
                </el-radio-group>
              </el-form-item>
  
              <el-form-item label="出发时间">
                <div class="block">
                  <el-time-picker v-model="dateStr" arrow-control placeholder="Arbitrary time"
                   @change="startTimeZ" />
                </div>
              </el-form-item>
              <el-form-item label="出发人数">
                <el-radio-group v-model="formCarpoolOrder.passengerTripNumPassengers">
                  <el-radio-button label="1" />
                  <el-radio-button label="2"  />
                  <el-radio-button label="3" />
                  <el-radio-button label="4" />
                  <el-radio-button label="5" />
                  <el-radio-button label="6" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="起始地点">
                <el-select v-model="formCarpoolOrder.startLocationName" clearable>
                  <el-option label="阿拉尔" value="阿拉尔" />
                  <el-option label="阿克苏" value="阿克苏" />
                </el-select>
              </el-form-item>
              <el-form-item label="起始维度">
                <el-input v-model="formCarpoolOrder.startLocationLongitude" />
              </el-form-item>
              <el-form-item label="起始经度">
                <el-input v-model="formCarpoolOrder.startLocationLatitude" />
              </el-form-item>

              <div class="map">
                    <Map>

                    </Map>
                </div>


              <el-form-item>
                <el-button type="primary" @click="addOrder">提交</el-button>
              </el-form-item>
            </el-form>
  
          </el-row>
        </el-card>
      </div>
    </div>
  </template>
  <script setup>
  import { reactive, ref, onMounted } from 'vue'
  import { ElMessage } from 'element-plus'
 import service from "@/utils/request.js";


  const labelPosition = ref('left')

  const userInfo = ref({});
  
  const formCarpoolOrder = ref({
    passengerId: '',
    name: '',
    username: '',
    phone: '',
    passengerRouteId:'',
    route: '',
    price: '',
    startTime: '',
    startDate: '',
    passengerTripNumPassengers: '',
    status: '待接受',
    startLocationName: '',
    startLocationLongitude: '',
    startLocationLatitude: '',
    isDeleted: '0'
  })
  
  const routePrice = ref([])
  const routePrice2 = ref('')
  
  const chuFadate = ref('')
  
const dateStr=ref('')
  const startTimeZ=()=>{
    const date = new Date(dateStr.value);
    const year = date.getFullYear(); // 年份
    const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份（注意要加1，并补零）
    const day = ('0' + date.getDate()).slice(-2); // 日期（补零）
    const hours = ('0' + date.getHours()).slice(-2); // 小时（补零）
    const minutes = ('0' + date.getMinutes()).slice(-2); // 分钟（补零）
    const seconds = ('0' + date.getSeconds()).slice(-2); // 秒钟（补零）
formCarpoolOrder.value.startTime= `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }
 
  
  const queryRouteprice = () => {
    //获取路线行程数据
    service.get(`/passenger-trip/queryAllRoute`)    
      .then(result => {
        if (result.success == true) {
          routePrice.value = result.data.data;
        }
      })     

  const originalString = localStorage.getItem("user")
  var newStr = originalString.substring(13, originalString.length - 1); // 从索引12开始，截取到字符串末尾的前一个字符，即去掉 "]"
  // 去掉字符串两侧的空格，并替换其中的等号和单引号为对应的JSON字符
  var newStr = newStr.replace(/=/g, ':').replace(/'/g, '"');
  // 在字符串开头和结尾添加大括号，使其成为一个完整的JSON对象
  let pairs = newStr.split(", ");
  let jsonObj = {};
  for (let i = 0; i < pairs.length; i++) {
    let keyValuePair = pairs[i].split(":");
    jsonObj[keyValuePair[0]] = keyValuePair[1];
  }
  let jsonStr = JSON.stringify(jsonObj);
  userInfo.value = JSON.parse(jsonStr);


}

  
  
  


  //发布订单
  const addOrder = () => {
    formCarpoolOrder.value.passengerId=userInfo.value.id
    formCarpoolOrder.value.name=userInfo.value.name
    formCarpoolOrder.value.username=userInfo.value.username
    formCarpoolOrder.value.phone=userInfo.value.phone
    formCarpoolOrder.value.passengerRouteId = routePrice2.value.id;
    formCarpoolOrder.value.route = routePrice2.value.route;
    formCarpoolOrder.value.price = routePrice2.value.price;
  
    if (chuFadate.value == '今天') {
      const tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate());
      const year = tomorrow.getFullYear();
      const month = tomorrow.getMonth() + 1; // getMonth() 返回的月份从 0 开始，所以需要加 1
      const date = tomorrow.getDate();
      formCarpoolOrder.value.startDate = `${year}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}`;
    } else if (chuFadate.value == '明天') {
      const tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1); // 增加一天
      const year = tomorrow.getFullYear();
      const month = tomorrow.getMonth() + 1; // getMonth() 返回的月份从 0 开始，所以需要加 1
      const date = tomorrow.getDate();
      formCarpoolOrder.value.startDate = `${year}-${month < 10 ? '0' + month : month}-${date < 10 ? '0' + date : date}`;
    }
  
    console.log(formCarpoolOrder.value)
    const jsonO = JSON.stringify(formCarpoolOrder);

    service.post('/passenger-trip/passenger/order',formCarpoolOrder.value)
      .then(result => {
      if (result.success == true) {
        ElMessage({
          title: "OK",
          message: result.message,
          type: 'success'
        })
      }
    }).catch(error => {
  // 处理请求失败的情况
  console.error(error);
});
  }
  
  
  
  
  onMounted(() => {
    queryRouteprice();
  })
  
  
  
  </script>
  <style  scoped>
  .header {
    text-align: center;
    background-color: #BDDCFF;
    height: 60px;
    line-height: 60px;
    color: #495e77;
  
  }
  
  .user {
    margin: 10px 20px;
    display: flex;
    border: 2px solid #ccc;
    border-radius: 6px;
  
  
  
    .info {
      line-height: 20px;
    }
  }
  </style>